// MyComponent.jsx
import { defineComponent, computed, ref } from 'vue'

export default defineComponent({
    props: ['msg'],
    setup(props) {
        const message = ref('欢迎使用JSX语法自定义渲染模板' + props.msg)
        const inputValue = ref('')

        // 计算属性
        const computedMessage = computed(() => {
            return `${message.value}(computed)`
        })

        // 方法
        const updateMessage = () => {
            message.value = 'Message updated!'
        }

        // JSX 渲染函数
        return () => (
            <div>
                <h1>{message.value}</h1>
                <p>{computedMessage.value}</p>
                <button onClick={updateMessage}>确认</button>
                <input v-model={inputValue} placeholder="请输入" />
                <p>Input Value:{inputValue.value}</p>
            </div>
        )
    }
})
